<template>
  <div>
    <div>
      <el-table class="publicTable" id="publicTableId" :data="newTableData" ref="filterTable" @sort-change="sortChange" max-height="45vh" v-loading="loading" style="border: 1px solid #e6ebf5;" border>
        <el-table-column :show-overflow-tooltip="true">
          <template slot="header" slot-scope="{}">
            <el-row :gutter="5">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['com.sdm:file:export']">导出</el-button>
              </el-col>
              <el-col :span="1.5">
                <!-- (复杂属性)viewType  0 列表预览 1弹窗预览  -->
                <el-button v-if="col.viewType==1" type="primary" plain icon="el-icon-more" size="mini" @click="openDialog=true">更多</el-button>
              </el-col>
            </el-row>
          </template>
          <el-table-column :show-overflow-tooltip="true" type="index" label="NO.">
          </el-table-column>
          <el-table-column v-if="columnsData.length == 0" width="520">
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" v-for="(item, index) in columnsData" :width="getWithNumber(columnsData,item.formwidth,1)" :min-width="getWithNumber(columnsData,item.formwidth,2)" :label="item.label" :prop="item.basicCode" :formatter="(row, column, cellValue) =>formatter(cellValue,item.formTypeName,item.basicCode,item.dictList)">
          </el-table-column>
        </el-table-column>
      </el-table>
      <pagination v-show="dataExtendTotal/queryParams.pageSize>1" :total="dataExtendTotal" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getData" />
    </div>
    <el-dialog :visible.sync="openDialog" :close-on-click-modal="false" width="80%">
      <div>
        <el-table class="publicTable" :data="newTableData" ref="filterTable" @sort-change="sortChange" max-height="45vh" style="border: 1px solid #e6ebf5;" border>
          <el-table-column :show-overflow-tooltip="true">
            <template slot="header" slot-scope="{}">
              <el-row :gutter="5">
                <el-col :span="1.5">
                  <el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['com.sdm:file:export']">导出</el-button>
                </el-col>
              </el-row>
            </template>
            <el-table-column :show-overflow-tooltip="true" type="index" label="NO.">
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" v-for="(item, index) in columnsData" :label="item.label" :width="item.formwidth" :prop="item.basicCode" :formatter="(row, column, cellValue) =>formatter(cellValue,item.formTypeName,item.basicCode,item.dictList)">
            </el-table-column>
          </el-table-column>
        </el-table>
        <pagination v-show="dataExtendTotal/queryParams.pageSize>1" :total="dataExtendTotal" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getData" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listContainMCode } from "@/api/form/modelfield";
import { getJson } from "@/api/form/data";
export default {
  name: 'publicTable',
  props: {
    // 需要的参数
    col: {
      type: Object,
      required: true,
      default: () => { }
    },
    partId: {
      type: String,
      required: false,
      default: ""
    },
    updateDate:{
      type: String,
      required: false,
      default: ""
    }
  },
  data () {
    return {
      loading: true,
      openDialog: false,
      newTableData: [],
      fieldId: "",
      dataExtendTotal: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      columnsData: [],
      extendUpdated:false
    };
  },
  watch: {
    partId: {
      handler (n, o) {
        this.getData();
      }
    },
    updateDate:{
      handler (n1, o1) {
        this.getData();
      }
    }
  },
  created () {
    // ****复杂属性完成后续取值代码根据实际情况调整---后续接口补充分页

    this.fieldId = this.col.fieldId;
    this.originalTableData = this.tableData;
    this.newTableData = this.tableData;
    this.getList();
    this.getData();
  },
  methods: {
    // 当整个列宽加一起，比表格宽度小时，用min-width，当列宽度和相加大于格宽度时，用with 取实际的
    // type=1是要返回width的值，type=2是返回min-width的值
    getWithNumber (columnsData, formwidth, type) {
      let retWithVal = 0
      // 表格宽度
      let publicTableId = document.getElementById("publicTableId").offsetWidth;
      // 列的总宽度
      let sumWidth = 0
      columnsData.map(item => {
        sumWidth = sumWidth + parseInt(item.formwidth)
      })
      if (type == 1 && (sumWidth >= publicTableId)) {
        retWithVal = formwidth
      }
      if (type == 2 && (sumWidth < publicTableId)) {
        retWithVal = formwidth
      }
      return retWithVal
    },
    openDiaBtn () {
      this.$emit("openDialog", true)
    },
    sortChange (column, prop, order) {
      console.log('排序', column.prop)//后台添加入参：prop: 'PS_JJAFLQNJ'
      this.getData(column.prop)
    },
    getList () {// 查询属性code格式化后的列配置list
      listContainMCode({ parentId: this.fieldId }).then(data => {
        if (data.code === 200) {
          this.columnsData = data.data;
        }
      })

    },
    getData (prop) {
      if (!this.extendUpdated) {
        this.extendUpdated = true;
        this.queryParams.tplId = this.fieldId;
        this.queryParams.parentId = this.partId;
        if (prop) {
          this.queryParams.prop = prop;
        }
        getJson(this.queryParams).then(response => {
          this.newTableData = response.list.length == 0 ? [] : response.list;
          this.dataExtendTotal = response.total;
          this.loading = false
        })
        this.$nextTick(() => {
          this.extendUpdated = false;
        });
      }
    },
    handleClick (row) {
      console.log(row);
    },
    addRow () {
      this.newTableData.push({});
    },
    editableCellClick (a) {
      console.log(a);
    },
    /** 导出按钮操作 */
    handleExport () {
      console.log(this.fieldId)
      console.log(this.partId)
      this.download('config/gridConfig/complexExport/' + this.fieldId + '/' + this.partId + '/' + true, {
      }, `模型.xlsm`)
    },
    formatter (cellValue, type, column, dictList) {

      if (cellValue === null || cellValue === undefined || cellValue.length === 0) return null;
      if (dictList === undefined) {
        return cellValue;
      }

      let v = "";
      if (cellValue instanceof Array) {
        dictList.forEach((d) => {
          cellValue.forEach(c => {
            if (d.dictValue === c) {
              v = v === "" ? d.dictLabel : v + "," + d.dictLabel;
            }
          })
        });
      } else {
        dictList.forEach((d) => {
          if (d.dictValue === cellValue) {
            v = d.dictLabel;
          }
        });

      }
      return v;
    }
  }
}

</script>

<style lang="scss" scoped>
::v-deep .el-table--medium .el-table__cell {
  padding: 5px 0;
}

.publicTable {
  border-radius: 5px;
}
.publicTable table {
  width: 100% !important;
}

.editableInput {
  /*display: none;*/
}
</style>
